<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10vue中的事件处理</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
      <button @click="handleClick">Button</button>
      <button @click="handleClickA($event, 1, 2)">Button</button>

      <div>------提交后跳转------</div>
      <form action="/abc">
        <input type="submit">
      </form>
      <div>------提交后不跳转------</div>
      <div>------vue的事件修饰 ------</div>
      <h6>@click.prevent</h6>
      <form action="/abc" @click.prevent>
        <input type="submit">
      </form>
      <div>-------------------------</div>
      <h6>@click.stop 阻止表单冒泡</h6>
      <h6>@click.self</h6>
      <div @click="handleClickB">
        nice
        <div>hello world</div>
      </div>
      <h6>self要求：只有在e.target=e.currentTargent的时候才会执行</h6>
      <div @click.self="handleClickB">
        nice
        <div>hello world</div>
      </div>
      <div>-------------------------</div>
      <h6>@click.once</h6>
      <h6>@click.capture</h6>
      <div @click="handleClickOuter">
        <div @click="handleClickInner">hello capture</div>
      </div>
      <div @click.capture="handleClickOuter">
        <div @click.capture="handleClickInner">hello capture</div>
      </div>
      <h6>事件阶段：捕获，目标，冒泡</h6>
      <h6>事件keydown</h6>
      <div>
        <input type="text" @keydown="handleKeyDown">
        <input type="text" @keydown.enter="handleKeyDown">
        <input type="text" @keydown.tab="handleKeyDown">
        <input type="text" @keydown.delete="handleKeyDown">
        <input type="text" @keydown.esc="handleKeyDown">
        <input type="text" @keydown.ctrl="handleKeyDown">
        <input type="text" @keydown.alt="handleKeyDown">
        <input type="text" @keydown.shift="handleKeyDown">
        <input type="text" @keydown.meta="handleKeyDown">

        <div @click.left="handleClickLeft">点击</div>
      </div>
  </div>
  <script>
    
    var vm = new Vue({
      el: "#root",
      data: {

      },
      methods: {
        handleClick: function(e) {
          console.log(e);
        },
        handleClickA: function(e, one, two) {
          console.log(e, one, two);
        },
        handleClickB: function() {
          alert("123");
        },
        handleClickInner: function() {
          alert("inner");
        },
        handleClickOuter: function() {
          alert("outer");
        },
        handleKeyDown: function(e) {
          console.log(e.target.value);
        },
        handleClickLeft: function() {
          console.log("left");
        }
      },
    })
  </script>
</body>
</html>